<template>
  <div class="identity">
    <a-divider orientation="left"
      >layout: inline（不需要Grid栅格布局，推荐少量字段表单场景使用）</a-divider
    >
    <BaseSearch
      layout="inline"
      :labelCol="{ style: { width: '120px' } }"
      :footerItem="true"
      :configJsonArr="configJsonArr"
      @watchItem="watchItem"
      @confirm="confirm" />

    <a-divider orientation="left"
      >layout:
      vertical（可以配合grid使用，推荐多字段表单，添加编辑表单场景使用）</a-divider
    >
    <BaseSearch
      :grid="3"
      layout="vertical"
      :footerItem="true"
      :configJsonArr="configJsonArr"
      :baseData="baseData"
      @watchItem="watchItem"
      @confirm="confirm" />

    <a-divider orientation="left"
      >layout:
      horizontal（适合弹窗表单场景、可以配合grid使用，需要Grid布局的搜索场景）</a-divider
    >
    <BaseSearch
      class="flex-item"
      layout="horizontal"
      :grid="4"
      :footerItem="true"
      :configJsonArr="configJsonArr"
      :baseData="baseData"
      @watchItem="watchItem"
      @confirm="confirm" />

    <a-divider orientation="left">custom footer & API</a-divider>
    <BaseSearch
      ref="baseSearchRef"
      layout="horizontal"
      :grid="4"
      :footerItem="true"
      :configJsonArr="configJsonArr"
      :baseData="baseData"
      @confirm="confirm">
      <template v-slot:footer>
        <a-button type="primary" html-type="submit">保存</a-button>
        <a-button type="primary" @click="addPrice">添加金额配置</a-button>
        <a-button type="primary" @click="setItemValue">设置属性</a-button>
        <a-button type="primary" @click="onReset">重置</a-button>
      </template>
    </BaseSearch>

    <a-divider orientation="left">自定义表单字段</a-divider>
    <BaseSearch
      class="flex-item"
      ref="customBaseSearchRef"
      layout="horizontal"
      :labelCol="{ style: { width: '120px' } }"
      :grid="4"
      :footerItem="true"
      :configJsonArr="configJsonArr"
      :baseData="customBaseData"
      @confirm="confirm"
      @reset="customReset">
      <template v-slot:name>
        <a-form-item
          class="custom-item"
          :colon="false"
          :htmlFor="htmlFor"
          :name="htmlFor"
          :rules="[{ required: true }]">
          <template v-slot:label>
            <a-form-item-rest>
              <a-select
                v-model:value="htmlFor"
                :options="[
                  {
                    label: '名称',
                    value: 'name'
                  },
                  {
                    label: '手机',
                    value: 'phone'
                  }
                ]"></a-select>
            </a-form-item-rest>
          </template>
          <a-input
            v-model:value="customBaseData[htmlFor]"
            placeholder="请输入"></a-input>
        </a-form-item>
      </template>
    </BaseSearch>

    <a-divider orientation="left">onSubmit API</a-divider>
    <BaseSearch
      :footerItem="false"
      :configJsonArr="configJsonArr"
      ref="baseSearchOnFinishRef" />
    <a-button @click="onSubmit">onSubmit</a-button>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref, reactive } from 'vue'
import BaseSearch from '@/components/BaseSearch'

/** search表单变化监听方法 */
const watchItem = (data) => {
  if (data.method) {
    actions[data.method](data)
  }
}
const supplierChange = () => {
  console.log('supplierChange')
}
const actions = {
  supplierChange: supplierChange
}

const supplierFocus = () => {
  console.log('supplierFocus')
}

/** 表单基本配置信息 start */
const baseData = reactive({
  name: '123',
  staff: '1',
  create_time: new Date(),
  doubel: [
    {
      label: 'jack',
      value: '1'
    },
    {
      label: 'snake',
      value: '2'
    }
  ]
})
const configJsonArr = reactive([
  {
    type: 'Cascader',
    label: '项目',
    name: 'program_code',
    rules: [{ required: true }],
    grow: 2,
    props: {
      showSearch: true,
      allowClear: true,
      options: [
        {
          code: '001',
          name: '入户',
          child: [
            {
              code: '0010001',
              name: '广州入户'
            }
          ]
        }
      ],
      placeholder: '请选择',
      fieldNames: {
        value: 'code',
        label: 'name',
        children: 'child'
      }
    },
    watch: true,
    watchMethod: 'supplierChange'
  },
  {
    type: 'Input',
    label: '用户名称',
    name: 'name',
    grow: 2,
    props: {
      allowClear: true,
      placeholder: '请输入用户名称',
      disabled: false
    },
    watch: true,
    watchMethod: 'supplierChange'
  },
  {
    type: 'Select',
    label: '用户名称',
    name: 'staff',
    props: {
      showSearch: true,
      allowClear: true,
      placeholder: '请输入',
      disabled: false,
      options: [
        {
          label: 'jack',
          value: '1'
        },
        {
          label: 'snake',
          value: '2'
        }
      ]
    },
    watch: true,
    watchMethod: 'supplierChange',
    focus: supplierFocus
  },
  {
    type: 'Select',
    label: '多选用户',
    name: 'doubel',
    props: {
      mode: 'multiple',
      showSearch: true,
      allowClear: true,
      labelInValue: true,
      placeholder: '请输入',
      disabled: false,
      options: [
        {
          label: 'jack',
          value: '1'
        },
        {
          label: 'snake',
          value: '2'
        }
      ]
    }
  },
  {
    type: 'TreeSelect',
    label: '组织架构',
    name: 'organization',
    props: {
      showSearch: true,
      allowClear: true,
      treeCheckable: true,
      treeData: [
        {
          code: '001',
          name: '入户',
          child: [
            {
              code: '0010001',
              name: '广州入户',
              disabled: true
            },
            {
              code: '0010002',
              name: '深圳入户'
            }
          ]
        }
      ],
      placeholder: '请选择',
      fieldNames: {
        value: 'code',
        label: 'name',
        children: 'child'
      }
    },
    watch: true,
    watchMethod: 'supplierChange'
  },
  {
    type: 'DatePicker',
    name: 'create_time',
    label: '创建时间',
    props: {
      placeholder: '开始时间',
      showTime: { format: 'HH:mm:ss' },
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'x'
    },
    watch: true,
    watchMethod: 'supplierChange'
  },
  {
    type: 'DatePicker',
    name: 'week',
    label: 'week',
    props: {
      picker: 'week',
      placeholder: '开始时间',
      valueFormat: 'x'
    }
  },
  {
    type: 'DatePicker',
    name: 'month',
    label: 'month',
    props: {
      picker: 'month',
      placeholder: '开始时间',
      format: 'YYYY-MM',
      valueFormat: 'x'
    }
  },
  {
    type: 'DatePicker',
    name: 'quarter',
    label: 'quarter',
    props: {
      picker: 'quarter',
      placeholder: '开始时间',
      valueFormat: 'x'
    }
  },
  {
    type: 'DatePicker',
    name: 'fw_time',
    label: '服务时间',
    props: {
      type: 'a-range-picker',
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'HH:mm:ss' },
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'x',
      presets: [
        { label: '当日', value: [dayjs(), dayjs()] },
        { label: '近七天', value: [dayjs().add(-7, 'day'), dayjs()] },
        { label: '近一月', value: [dayjs().add(-1, 'month'), dayjs()] },
        { label: '近三月', value: [dayjs().add(-3, 'month'), dayjs()] },
        { label: '近六月', value: [dayjs().add(-6, 'month'), dayjs()] }
      ]
    }
  },
  {
    type: 'Input',
    label: '备注',
    name: 'ramker',
    grow: 4,
    props: {
      type: 'a-textarea',
      allowClear: true,
      placeholder: '请输入备注',
      disabled: false
    }
  },
  {
    type: 'RadioGroup',
    label: '岗位状态',
    name: 'job_status',
    props: {
      fieldNames: { label: 'label', value: 'value' },
      options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '停用',
          value: 0
        }
      ]
    }
  }
])

/** custom footer & API start */
const addPrice = () => {
  configJsonArr.push({
    type: 'InputNumber',
    label: '金额',
    key: 'price',
    props: {
      addonAfter: '元',
      allowClear: true,
      placeholder: '请输入金额',
      disabled: false
    }
  })
}

const baseSearchRef = ref(null)
const setItemValue = () => {
  // 通过ref设置
  baseSearchRef.value.setOnlyFieldsValue('staff', '2')
  baseSearchRef.value.setOnlyFieldsValue('name', 'jack')
}

const onReset = () => {
  // BaseSearch组件暴露的reset方法
  baseSearchRef.value.onReset()
}

/** 自定义表单字段 start */
const htmlFor = ref('name')
const customBaseData = reactive({})
const customReset = () => {
  Object.keys(customBaseData).map((key) => {
    customBaseData[key] = undefined
  })
}

/** onSubmit start */
const baseSearchOnFinishRef = ref(null)
const onSubmit = async () => {
  const values = await baseSearchOnFinishRef.value.onSubmit()
  console.log(values)
}

/** 提交 start  */
const confirm = (values) => {
  console.log(values)
}
</script>

<style lang="less" scoped></style>
